<!DOCTYPE html>
<html>
<head>
    <title>图表展示</title>
    {% include 'system/common/header.html' %}
</head>
<body class="pear-container">
    <style>
        .layui-row {
            display: flex;
            flex-wrap: wrap;
            overflow: hidden; /* 隐藏溢出部分 */
        }
        .layui-col-md6, .layui-col-md12 {
            box-sizing: border-box;
            padding: 10px;
            width: calc(50% - 20px); /* 调整列宽并考虑边距 */
        }
        .layui-col-md12 {
            width: 100%; /* 单独一行时占满整个宽度 */
        }
        .layui-card {
            margin-bottom: 20px; /* 添加底部边距 */
            height: auto; /* 改为自适应高度 */
        }
        .layui-card-body {
            height: 100%;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden; /* 隐藏图表内部溢出 */
        }
        /* 为每个图表添加最大高度限制，防止过大 */
        .layui-card-body > div {
            max-height: 400px;
            width: 100%;
        }
    </style>
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-body">
                    {{ bar_chart|safe }}
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-body">
                    {{ radar_chart|safe }}
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-body">
                    {{ line_chart|safe }}
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-body">
                    {{ boxplot_chart|safe }}
                </div>
            </div>
        </div>
    </div>

{% include 'system/common/footer.html' %}
</body>
</html>